import {createRender} from '../src/core/render'
import {createStore} from '../src/plugins/store'

(async function () {
  document.title = '案例一：基于 canvas 实现'

  const tips = `
在canvas上 实现新增楼层（长方形），
然后在对应楼层里可以新增几个桌子（圆形），
桌子可以随意摆放，用户可以拖动桌子的位置，放大缩小，
最后数据保存在storage，刷新后还原回用户编辑状态。
`
  localStorage.getItem('data') || alert(tips)
  console.log(tips)

  // 创建 CanvasRender 用于在 canvas 上生成元素
  const Render = await createRender('canvas')
  // 创建 store 用于数据持久化
  const store = await createStore('localstorage')

  // 分别为 Render 提供 scheme 和 data 用于生成 page
  // 参考了 阿里杨文坚老师的营销页面生成原理
  // https://github.com/FE-star/2022.08/blob/main/week1.pdf
  const render = new Render({
    el: '#canvas'
  }, [
    {
      top: 0,
      left: 0,
      width: 1000,
      height: 500,
      fill: 'green',
      type: 'rect',
      children: [
        {
          top: 50,
          left: 50,
          radius: 65,
          fill: '#039BE5',
          stroke: 'red',
          strokeWidth: 3,
          type: 'circle',
          children: [
            {
              top: 25,
              left: 25,
              radius: 15,
              fill: 'red',
              strokeWidth: 3,
              type: 'circle',
            },
            {
              top: 25,
              left: 70,
              radius: 15,
              fill: 'red',
              strokeWidth: 3,
              type: 'circle',
            },
          ]
        },
        {
          top: 150,
          left: 450,
          radius: 65,
          fill: '#039BE5',
          stroke: 'red',
          strokeWidth: 3,
          type: 'circle',
          children: [
            {
              top: 25,
              left: 25,
              radius: 15,
              fill: 'red',
              strokeWidth: 3,
              type: 'circle',
            },
            {
              top: 25,
              left: 70,
              radius: 15,
              fill: 'red',
              strokeWidth: 3,
              type: 'circle',
            },
          ]
        }
      ]
    }
  ])

  render.use(store).render()
})()
